<template>
    <div class="page-container">
        <!-- 页面头部卡片 -->
        <div class="page-header">
            <div class="header-content">
                <div class="search-section">
                    <div class="search-form">
                        <#if columns??>
                            <#list columns as column>
                                <#if column.searchInfo??>
                                    <div class="search-item">
                                        <el-input 
                                            v-model="searchDTO.${column.fieldName}" 
                                            clearable
                                            class="search-input"
                                            placeholder="请输入${column.columnComment}"
                                            :prefix-icon="Search"
                                        />
                                    </div>
                                </#if>
                            </#list>
                        </#if>
                        <el-button 
                            type="primary" 
                            :icon="Search" 
                            class="search-btn"
                            @click="getList"
                        >
                            搜索
                        </el-button>
                    </div>
                </div>
                <div class="action-section">
                    <el-button 
                        type="primary" 
                        :icon="Plus" 
                        class="action-btn add-btn"
                        @click="add"
                    >
                        添加
                    </el-button>
                    <el-button 
                        type="success" 
                        :icon="Download" 
                        class="action-btn export-btn"
                        @click="exportData"
                    >
                        导出
                    </el-button>
                </div>
            </div>
        </div>

        <!-- 统一的对话框表单 -->
        <CommonDialogForm
                v-model:has-loading="loading"
                v-model:visible="dialogVisible"
                v-model:form-params="formData"
                :rules="${className}Rule.formRule"
                :item-config="${className}Param.formColumn"
                :title="dialogType === 'add' ? '添加${tableComment}' : '修改${tableComment}'"
                :width="'30%'"
                :submit-text="'保存'"
                :chancel-text="'取消'"
                :is-submit="true"
                :close-tips="true"
                @submit="onSubmit"
        >
        </CommonDialogForm>

        <!-- 数据表格卡片 -->
        <div class="table-container">
            <CommonPageTable
                    ref="pageTableRef"
                    :table-column="${className}Param.tableColumn"
                    :table-data="searchVO"
                    :table-loading="loading"
                    :table-attribute="{
        'empty-text': '暂无数据',
        height: TABLE_ENUM.height
      }"
                    :page-params="searchDTO.page"
                    :page-attribute="{
        size: 'small',
        pageSizes: [10, 20, 50, 100],
        layout: ' total, sizes, prev, pager, next, jumper'
      }"
                    @search="getList"
                    @update="update"
                    @remove="remove"
            />
        </div>
    </div>
</template>

<script setup lang="ts">
    //----------------------------------导入区---------------------------------
    import {onMounted, reactive, ref} from 'vue'
    import CommonPageTable from '@/components/CommonPageTable.vue'
    import CommonDialogForm from '@/components/CommonDialogForm.vue'
    import ObjectUtils from '@/utils/ObjectUtils'
    import {${className}Api} from '@/apis/api/${packName}/${className}Api'
    import {${className}Param} from '@/params/${packName}/${className}Param'
    import type {
        ${className}AddDTOType,
        ${className}SearchDTOType,
        ${className}SearchVOType,
        ${className}UpdateDTOType
    } from '@/types/${packName}/${className}Type'
    import {${className}Rule} from '@/rules/${packName}/${className}Rule'
    import ElementUtil from '@/utils/ElementUtil'
    import type { ResultPageType } from '@/types/base/api'
    import { TABLE_ENUM } from '@/params/base/table'
    import { Search, Plus, Download } from '@element-plus/icons-vue'

    //----------------------------------数据区---------------------------------
    const loading = ref(false)
    const dialogVisible = ref(false)
    const dialogType = ref<'add' | 'update'>('add')
    const searchDTO = reactive < ${className}SearchDTOType > ({...${className}Param.searchDTO})
    const searchVO = ref < ResultPageType > ()
    const formData = reactive<${className}AddDTOType | ${className}UpdateDTOType>({...${className}Param.addDTO})
    const pageTableRef = ref()

    // ----------------------------------方法区--------------------------------

    /**
     * 导出 ${tableComment}
     */
    async function exportData() {
        loading.value = true
        await ${className}Api.export(searchDTO)
        ElementUtil.showNotification('','导出成功','success',3000)
        loading.value = false
    }
    /**
     * 添加 ${tableComment} 前置
     */
    function add() {
        dialogType.value = 'add'
        ObjectUtils.copyObject(formData, ${className}Param.addDTO)
        ObjectUtils.resetObject(formData, ${className}Param.addDTO)
        dialogVisible.value = true
    }

    /**
     * 更新 ${tableComment} 前置
     * @param vo 选中数据
     */
    function update(vo: ${className}SearchVOType) {
        dialogType.value = 'update'
        ObjectUtils.copyObject(formData, ${className}Param.updateDTO)
        ObjectUtils.copy(vo, formData)
        dialogVisible.value = true
    }

    /**
     * 统一的提交处理函数
     * @param params 表单数据
     */
    async function onSubmit(params: ${className}AddDTOType | ${className}UpdateDTOType) {
        if (dialogType.value === 'add') {
            await ${className}Api.add(params as ${className}AddDTOType)
            ObjectUtils.resetObject(formData, ${className}Param.addDTO)
        } else {
            await ${className}Api.update(params as ${className}UpdateDTOType)
        }

        loading.value = false
        dialogVisible.value = false
        await getList()
    }

    /**
     * 删除 ${tableComment}
     * @param vo 选中数据
     */
    async function remove(vo: ${className}SearchVOType) {
        if (await ElementUtil.openBox({content: '是否删除,删除后不可恢复！'})) {
            await ${className}Api.delete(Array.of(vo.id))
            await getList()
        }
    }

    /**
     * 获取 ${tableComment} 列表
     */
    async function getList() {
        loading.value = true
        const result = await ${className}Api.search(searchDTO)
        searchVO.value = result.data
        loading.value = false
    }

    onMounted(() => {
        getList()
    })
</script>

<style scoped>
@import '@/assets/viewPage.css';
</style>
